<template>
    <div class="top">
      <home-menu></home-menu>
      <div class="topbar">
        <h1 class="top-bar-h1">
          <a href="javascript:(0)">南平普法网</a>
        </h1>
        <div class="top-btn">
          <span class="top-btn-span" id="id" @click="topBtn(id)">
            <img class="home-btn-img" src="static/imgs/home-btn.png"/>
          </span>
        </div>
        <p class="top-bar-p"></p>
      </div>
    </div>
</template>

<script>
  import homeMenu from '@/pages/home/menu'
    export default {
      name: "topBar",
      data(){
        return{
          id:1
        }
      },
      components: {
        homeMenu
      },
      methods:{//
        topBtn(i){
          i++;
          this.id = i;

          if(i%2 == 0){
            document.querySelector(".home-menu").style.display="block";
          }else{
            document.querySelector(".home-menu").style.display="none";
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .top{
    max-width:750px;
    margin: 0 auto;
    background:#F5F5F5;
    border-bottom:.1rem solid #ddd;
    .topbar{
      height:5rem;
      .top-bar-h1{
        float:left;
        padding: 0 .5rem;
        height:5rem;

        a{
          display: block;
          font-size: 1.8rem;
          line-height:5rem;
          color: #666;
          font-weight: 600;
        }
      }
      .top-btn{
        float:right;
        background: transparent;
        .top-btn-span{
          display: block;
          background:#5eb95e;
          width:4.2rem;
          height:3.5rem;
          margin-top:.6rem;
          margin-right:.5rem;
          img{
            display: block;
            width:1.6rem;
            height:1.2rem;
            margin: 0 auto;
            padding-top: 1.2rem;
          }
        }
      }
      .top-bar-p{
        clear: both;
      }
    }
    .topbar-collapse{
      display: none;
      transition: all 2s linear ;

      .topbar-coll-ul{
        .topbar-cl-li{
          a{
            display: block;
            font-size:1.6rem;
            line-height:1.6;
            color:#666;
            padding:1.2rem 3rem;
          }
        }
      }
      .topbar-coll-form{
        padding-bottom:1rem;
        input{
          display: block;
          width: 34rem;
          margin:0 auto;
          font-size:1.4rem;
          line-height:3.5rem;
          border:.1rem solid #ccc;
          background:white;
          padding-left: 1rem;
          margin-bottom:.5rem;
        }
        button{
          display: block;
          width: 35rem;
          margin:0 auto;
          height:3.5rem;
          background:#e6e6e6;
          border:none;
        }
      }
    }
  }
</style>
